<template>  
  <Layout />  
</template>  
  
<script setup>  
import Layout from '@/layout';  
</script>  
  
<style>    
:root {  
  font-size: 16px;  
  --bgColor: #f7f7f7;  
  --borderColor: #f1f1f1;  
  --infoColor: #b1b1b1;  
  --textColor: #2b2b2b;  
  --maxWidth: 100vw; 
  --spacingUnit: 1rem; 
}  
  
html {  
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;  
}  
  
body {  
  margin: 0;  
  padding: 0;  
  background: var(--bgColor);  
  min-height: 100vh;  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',  
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',  
    sans-serif; 
  font-size: 1rem;  
  line-height: 1.6; 
  color: var(--textColor);  
  overflow-x: hidden; 
}  
   
#app {  
  max-width: calc(var(--maxWidth) - 2 * var(--spacingUnit)); 
  margin: 0 auto; 
  padding: var(--spacingUnit); 
  min-height: 100vh;  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between; 
  box-sizing: border-box; 
}  
  
body::-webkit-scrollbar {  
  display: none; 
}  
  
.container {  
  width: 100%;
  padding: var(--spacingUnit);  
  box-sizing: border-box; 
  border: 1px solid var(--borderColor); 
  border-radius: 0.5rem;   
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;  
}  
   
@media (max-width: 768px) {  
  #app {  
    padding: var(--spacingUnit) / 2; 
  }  
    
  .container {  
    border-radius: 0; 
  }  
}  
</style>